<?php
/*
Template Name: Budget Planner
Auther: Naseer Ahnad
Created: 10-03-2012
*/
?>
<?php get_header(); ?>
<script type="text/javascript">

function calculateBudget()
{
	var amt = $('#amount').val();
	var arrPercent = [0,2,1,45,2,2,7,1,2,6,3,2,5,3,1,10,8]
	var arrTable = $('#budget-tbl tr').toArray();
	$.each(arrTable, function(i,item){
		var percent = (arrPercent[i]/100) * amt;
		//alert(percent.toFixed(2));
		$(item).find('td:eq(1)').html('&pound;'+percent.toFixed(2));
	});	
	
	$('#total-budget').html('<strong>&pound;'+amt+'</strong>');
	
}

</script>

    <div class="main-content-inner global-width">
    
    	<aside class="one-third">
          	<?php get_sidebar(); ?>
    	</aside>
    	
    	<section class="contents two-third">
           	<h1>Budget Planner</h1>


		    <table width="100%" border="0">
		      <tr>
		        <td>
		            <table width="650" border="0" class="nm_tables">
		              <tr>
		                <td><h2>Average Budget Planner</h2></td>
		                <td>
		                	<div class="search search-page">
		                		<input class="search-field" type="text" id="amount" /><button class="search-button" onclick="calculateBudget()">Calculate</button>
		                	</div>
		                </td>
		              </tr>
		            </table>
		        </td>
		      </tr>
		      
		      <tr>  
		      <td><br /><br />
		        <table width="600" border="0" class="nm_tables" id="budget-tbl">
		          <tr>
		            <th><h2>Item</h2></th>
		            <th><h2>Amount</h2></th>
		            </tr>
		          <tr>
		            <td>Wedding Ceremony </td>
		            <td id="cell-1-3"></td>
		          </tr>
		          <tr>
		            <td>Officiant </td>
		            <td id="cell-2-3"></td>
		          </tr>
		          <tr>
		            <td>Reception / Venue</td>
		            <td id="cell-3-3"></td>
		          </tr>
		          <tr>
		            <td>Decoration</td>
		            <td id="cell-4-3"></td>
		          </tr>
		          <tr>
		            <td>Cake</td>
		            <td id="cell-5-3"></td>
		          </tr>
		          <tr>
		            <td>Bridal Outfit</td>
		            <td id="cell-6-3"></td>
		          </tr>
		          <tr>
		            <td>Bridal Hair &amp; Beauty</td>
		            <td id="cell-7-3"></td>
		          </tr>
		          <tr>
		            <td>Groom Outfit Hire</td>
		            <td id="cell-8-3"></td>
		          </tr>
		          <tr>
		            <td>Entertainment</td>
		            <td id="cell-9-3"></td>
		          </tr>
		          <tr>
		            <td>Rings</td>
		            <td id="cell-10-3"></td>
		          </tr>
		          <tr>
		            <td>Transport</td>
		            <td id="cell-11-3"></td>
		          </tr>
		          <tr>
		            <td>Flowers</td>
		            <td id="cell-12-3"></td>
		          </tr>
		          <tr>
		            <td>Stationery</td>
		            <td id="cell-13-3"></td>
		          </tr>
		          <tr>
		            <td>Postage</td>
		            <td id="cell-14-3"></td>
		          </tr>
		          <tr>
		            <td>Photography / Videography</td>
		            <td id="cell-15-3"></td>
		          </tr>
		          <tr>
		            <td>Contingency Fund</td>
		            <td id="cell-16-3"></td>
		          </tr>
		          <tr bgcolor="#CCCCCC">
		            <td>&nbsp;</td>
		            <td id="total-budget">Total</td>
		          </tr>
		        </table>
		      
		        </td>
		      </tr>
		    </table>
		</table>
<center><a href="javascript:print()">
<img src="<?php bloginfo( 'template_url' );?>/images/print_48.png" alt="Print" border="0" /></a></center>
           	<div class="clear"></div>
            
    	</section>   
    	<div class="clearfix"></div>
    </div>

<!-- Main Content Ends -->
</section>

<?php get_footer(); ?>